<!--
 * @Author: your name
 * @Date: 2021-05-23 12:12:16
 * @LastEditTime: 2021-05-29 17:16:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xd-cesium-vue\src\components\MenuBar.vue
-->
<template>
    <ul class="menuList">
        <li class="menuItem" v-for="todo,index in todoList" v-bind:key="index" @click="select($event)">
            <slot :name="'item'+index">{{todo}}</slot>
        </li>
    </ul>
</template>
<script type="module">
export default {
    props:['todoList'],
    data(){
        return{
            
        }
    },
    methods:{
            select(event){
                let lastDom =document.getElementsByClassName("menuItem-clicked")[0];
                if(lastDom){
                    lastDom.classList.remove("menuItem-clicked")
                }

                let dom =event.currentTarget;

                // dom.style="background-color:rgba(0,0,0,1)";
                dom.classList.add("menuItem-clicked")
            },
    }
}
</script>